<template>
  <div class="layui-col-xs3">
    <div class="shadowWrap">

      <div class="layui-tab">
        <ul>
          <li>
            <i/>
            <span>物联设备情况</span>
          </li>
        </ul>
        <span style="position: absolute;right: 0;top: 0;line-height: 40px;">最近统计时间：
          {{ newNow }}</span>
      </div>

      <div class="bg">
        <el-row :gutter="20" class="row">
          <el-col v-for="(item,index) in Data" :span="6" :key="index">
            <div :class="['box', {'on': item.assigntoken==null }]">
              <ul>
                <li class="layui-col-xs12" title="设备名称">
                  <i/>
                  <span>设备名称：{{ item.devicename }}</span>
                </li>
                <li class="layui-col-xs12" title="设备图片">
                  <i/>
                  <img :src="item.imagesshot" alt="">
                </li>
                <li class="layui-col-xs12" title="设备位置">
                  <i/>
                  <span>设备位置：{{ item.location }}</span>
                </li>
                <li class="layui-col-xs12" title="是否有告警">
                  <i/>
                  <span>设备是否关联资产：{{ item.assigntoken==null &&'未关联' || '已经关联' }}</span>
                </li>

              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.page"
          :page-sizes="[12,24,48,96]"
          :page-size="listQuery.limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
  </div>
</template>
<script type="text/javascript">
import { getDeviceList } from '@/api/fire/device/device'
export default {
  data() {
    return {
      activeIndex: 0,
      total: null,
      Data: [],
      newNow: '',
      listQuery: {
        page: 1,
        pagesize: 12,
        siteidfalg: true,
        selectColumn: '',
        columnValue: ''
      }

    }
  },
  mounted() {
    this.newNow = this.timeFormate(new Date())
    console.log('newNow', this.newNow)
  },
  created() {
    this.nowTimes()
    this.getList()
  },
  methods: {
    onSubmit() {
      // console.log('submit!');
      // this.$router.push('/personal/personal');
    },
    getList() {
      getDeviceList(this.listQuery).then(response => {
        this.Data = response.data.context
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },

    // 获取当前时间函数
    timeFormate(timeStamp) {
      const year = new Date(timeStamp).getFullYear()
      const month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      const date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      const hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      const mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      return year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm
    },
    // 定时器函数
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 30 * 1000)
    }
    // 创建完成时

  }
}

</script>
<style type="text/scss" lang="scss">
  .layui-tab {
    display: block;
    position: relative;
    color: #000;
    font-weight: 900;
    margin: 10px 0;
    position: relative;
    margin: 10px 0;
    text-align: left !important;
    > ul {
      background: rgb(238, 238, 238);
      position: relative;
      left: 0;
      height: 40px;
      white-space: nowrap;
      font-size: 0;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      transition: all .2s;
      -webkit-transition: all .2s;
      > li {
        list-style: none;
        display: inline-block;
        position: relative;
        > i {
          border: 8px solid transparent;
          border-left-width: 12px;
          border-left-color: #4A89FB;
          content: ' ';
          width: 0;
          height: 0;
        }
        > span {
          font-size: 14px;
          list-style: none;
          display: inline-block;
          vertical-align: middle;
          transition: all .2s;
          -webkit-transition: all .2s;
          position: relative;
          line-height: 40px;
          min-width: 65px;
          padding: 0 15px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
.bg {
  background: #eee;
  padding: 20px 30px;
  .row {
    background: #fff;
  }
}

.box{
  background: #fff;

  &.on {
    animation: myfirst 2s; //追加闪动动画
    -webkit-animation: myfirst 2s infinite linear;
  }

  >ul {
    padding: 10px 0;
    border: 1px solid #16B95D;
    border-radius: 5px;
    &:hover {
      box-shadow: 0 0 10px rgba(189, 4, 6, .3);
    }
    >li {
      width: 100%;
      padding: 5px 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 17px;
      > i {
        content: ' ';
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        background-image: url("http://47.105.172.250/fire/image/asset/pump.svg");
        background-position: -103px -200px;
      }
      > img {

        width: 90px;
        height: 90px;

      }
    }
  }
}

  @keyframes myfirst {
    from {
      background: red;
    }
    to {
      background: white;
    }
  }

  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
    from {
      background: red;
    }
    to {
      background: white;
    }
  }
</style>
